/* eslint-disable multiline-ternary */
/* eslint-disable no-unused-vars */
/* eslint-disable implicit-arrow-linebreak */
/* eslint-disable semi */
/* eslint-disable comma-dangle */
import React from 'react'
// third Party Packages
import { isObjEmpty } from '@utils'
import { useFormik } from 'formik'
import moment from 'moment'
import * as Yup from 'yup'
// Compoenets
import { Col, Form, Row, Table } from 'reactstrap'
const InvoiceSlip = ({ state, getMyProvider }) => {
  const today = new Date()
  //** Names */
  const providerFullName = `${getMyProvider?.first_name || '--'} ${
    getMyProvider?.middle_name || ''
  } ${getMyProvider?.last_name || ''}`
  const clientFullName = `${state?.client?.first_name || '--'} ${
    state?.client?.middle_name || ''
  } ${state?.client?.last_name || ''}`

  const newInvoiceSchema = Yup.object().shape({
    date: Yup.date(),
    client: Yup.string(),
    provider: Yup.string()
  })

  const formik = useFormik({
    initialValues: {
      date: moment(`${today}`).format().split('T')[0],
      client: '',
      provider: ''
    },
    enableReinitialize: true,
    validationSchema: newInvoiceSchema,
    onSubmit: (values) => {
      if (isObjEmpty(formik.errors)) {
        const data = {
          date: values.date,
          client: values.client,
          provider: values.provider
        }
        // dispatch(handleAppointmentPop(data))
      }
    }
  })

  return (
    <Form className="new_invoice_form">
      <>
        <p className="mb-0">From</p>
        <p>
          <strong>{providerFullName}</strong>
        </p>
        <p className="new_invoice_form--heading mt-3 mb-2">Invoice</p>
        <Row className="align-items-center">
          <Col sm={12} md={5}>
            <p className="mb-0">To:</p>
            <p className="mb-0">{clientFullName}</p>
            <p className="mb-0">123 Main Street</p>
            <p>Any town, CA 12345</p>
          </Col>
          <Col sm={12} md={5}>
            <p className="mb-0">Invoice</p>
            <p className="mb-1">#{state?.invoice_number}</p>

            <div className="new_invoice_form--flatPickr mt-1">
              <p>Issue Date</p>
              <p>
                {state?.issue_date !== null
                  ? moment.unix(state?.issue_date).format('MMM DD, YYYY')
                  : '--'}
              </p>
            </div>
          </Col>
        </Row>
        <hr className="mt-2 mb-2" />

        <Row>
          <Col sm={12} lg={5} md={5}>
            <strong>Client</strong>
            <p className="mb-0 mt-1">{clientFullName}</p>
            <p className="mb-0">{state?.client?.phone_number}</p>
            <p>{state?.client?.email}</p>
          </Col>
          <Col sm={12} lg={5} md={5}>
            <strong>Provider</strong>
            <p className="mb-0 mt-1">{providerFullName}</p>
            <p>{getMyProvider?.email || '--'}</p>
          </Col>
        </Row>
        <hr className="mt-2 mb-2" />
        <Table responsive className="invoice-services-table">
          <tbody>
            <tr>
              <th style={{ minWidth: '120px' }}>Date</th>
              <th style={{ minWidth: '250px' }}>Description</th>
              <th className="text-center">Amount</th>
            </tr>
          </tbody>
          <tbody>
            {state?.invoice_services.length > 0 &&
              state?.invoice_services.map((item, i) => {
                return (
                  <tr key={i}>
                    <td>
                      {moment
                        .unix(item?.service?.created_at)
                        .format('MM/DD/YYYY') || '--'}
                    </td>
                    <td>{item?.service?.service || '--'}</td>
                    <td className="text-center">${item?.fees || '--'}</td>
                  </tr>
                )
              })}
          </tbody>
        </Table>
        <hr className="mt-2 mb-2" />
        <Row className="align-items-center">
          <Col sm={12} md={5} lg={4} className="marginLeftAuto">
            <div className="new_invoice_form--total">
              <div>
                <p>Subtotal</p>
                <p>${state.fees}</p>
              </div>
              <hr className="mt-0" />
              <div>
                <p>Total</p>
                <p>${state.fees}</p>
              </div>
              <div>
                <p>Amount Paid</p>
                <p>{state.status === 0 ? `$${state.fees}` : '$0.00'}</p>
              </div>
              <hr className="mt-0" />
              <div>
                <p>Balance</p>
                <span>{state.status !== 0 ? `$${state.fees}` : '$0.00'}</span>
              </div>
            </div>
          </Col>
        </Row>
      </>
    </Form>
  )
}

export default InvoiceSlip
